<template>
    <nav class="nav">
        <ul>
            <li v-for="item in navList">
                <router-link active-class="active" :to="{ path: item.href }">
                    <span> {{ item.text }}</span>
                    <i></i>
                </router-link>
            </li>
        </ul>
    </nav>
</template>

<script>
export default {
    name: 'TabNav',
    data() {
        return {
            // 导航数据
            navList: [
                { text: '推荐音乐', href: "/home/recmusic", id: 1 },
                { text: '热门榜单', href: "/home/hotmusic", id: 2 },
                { text: '搜索', href: "/home/searchmusic", id: 3 },
            ]
        }
    }
}
</script>
<style lang="scss">
@import '../static/style/variable.scss';

.nav {
    width: 100%;
    height: 1.1733rem;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: .1333rem;
    ul {
        width: 100%;
        display: flex;
        height: 1.1733rem;
    }
    li {
        width: 33.3333%;
        height: 1.1733rem;
        padding: 0 .5333rem;
        box-sizing: border-box;
        text-align: center;
    }
    a {
        display: inline-block;
        height: 1.1733rem;
        line-height: 1.1733rem;
        text-align: center;
        span {
            font-size: 15px;
            display: block;
            transition: color .2s;
        }
        i {
            display: block;
            width: 0%;
            height: .0533rem;
            margin: 0 auto;
            transition: width .2s;
        }
    }
    .active {
       span {
            color: $activeColor;
       }
       i {
            width: 100%;
            background-color: $bgActiveColor;
       }
    }
}
</style>